<template>
  <section id="verify" class="section card">
    <header class="section__header">
      <div>
        <h2>库存核实记录</h2>
        <p v-if="isLoggedIn">掌握核实单状态，跟踪卖家回复与转单情况。</p>
        <p v-else>登录后可查看历史核实记录。</p>
      </div>
      <button class="btn btn--ghost" @click="$emit('refresh')">刷新</button>
    </header>

    <div v-if="!isLoggedIn" class="section__placeholder">
      <p>登录后可查看核实记录与详情。</p>
      <button class="btn btn--primary" @click="$emit('login')">立即登录</button>
    </div>

    <div v-else>
      <div v-if="error" class="section__error">
        <strong>加载失败：</strong>
        <span>{{ error }}</span>
        <button class="btn btn--primary" @click="$emit('refresh')">重试</button>
      </div>

      <div v-else-if="loading" class="section__loading">正在加载核实记录…</div>

      <div v-else-if="records.length" class="verify__layout">
        <table class="verify__table">
          <thead>
            <tr>
              <th>核实单号</th>
              <th>商品</th>
              <th>状态</th>
              <th>买家数量</th>
              <th>卖家数量</th>
              <th>发起时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="record in records" :key="record.id">
              <td>{{ record.verifyNo }}</td>
              <td>
                <div class="verify__product">
                  <strong>{{ record.product.title }}</strong>
                  <small>{{ record.product.model }}</small>
                </div>
              </td>
              <td><span class="verify__status">{{ record.statusLabel }}</span></td>
              <td>{{ record.buyerQty }}</td>
              <td>{{ record.sellerQty }}</td>
              <td>{{ record.buyerTime }}</td>
              <td class="verify__actions">
                <button class="link" @click="$emit('view', record.id)">查看</button>
                <button
                  v-if="record.status === 0"
                  class="link link--danger"
                  @click="$emit('cancel', record.id)"
                >
                  取消
                </button>
              </td>
            </tr>
          </tbody>
        </table>

        <div v-if="detail" class="verify__detail">
          <header>
            <h3>核实单详情</h3>
            <span class="verify__status">{{ detail.statusLabel }}</span>
          </header>
          <ul>
            <li>
              <strong>商品：</strong>
              <span>{{ detail.product.title }}（{{ detail.product.model }}）</span>
            </li>
            <li>
              <strong>买家数量：</strong>
              <span>{{ detail.buyerQty }}</span>
            </li>
            <li>
              <strong>卖家数量：</strong>
              <span>{{ detail.sellerQty || "待回复" }}</span>
            </li>
            <li>
              <strong>买家备注：</strong>
              <span>{{ detail.buyerRemark || "无" }}</span>
            </li>
            <li>
              <strong>卖家备注：</strong>
              <span>{{ detail.sellerRemark || "无" }}</span>
            </li>
            <li>
              <strong>发起时间：</strong>
              <span>{{ detail.buyerTime }}</span>
            </li>
            <li v-if="detail.sellerTime">
              <strong>卖家回复时间：</strong>
              <span>{{ detail.sellerTime }}</span>
            </li>
          </ul>
        </div>
      </div>

      <div v-else class="section__placeholder">
        <p>暂无核实记录，您可以在购物车中选择商品发起库存核实。</p>
      </div>
    </div>
  </section>
</template>

<script setup>
defineProps({
  records: { type: Array, default: () => [] },
  loading: { type: Boolean, default: false },
  error: { type: String, default: "" },
  detail: { type: Object, default: null },
  detailLoading: { type: Boolean, default: false },
  isLoggedIn: { type: Boolean, default: false }
});

defineEmits(["login", "refresh", "view", "cancel"]);
</script>

<style scoped lang="scss">
.section {
  margin-top: 28px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  h2 {
    margin: 0;
  }

  p {
    margin: 6px 0 0;
    color: var(--gray-500);
  }
}

.section__placeholder,
.section__loading {
  text-align: center;
  padding: 24px;
  background: var(--gray-100);
  border-radius: 12px;
}

.section__error {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 125, 0, 0.08);
  color: #c15c00;
  padding: 16px;
  border-radius: 12px;

  .btn {
    margin-left: auto;
  }
}

.verify__layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;

  @media (max-width: 960px) {
    grid-template-columns: 1fr;
  }
}

.verify__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;

  th,
  td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--gray-100);
    text-align: left;
  }

  th {
    background: var(--gray-100);
    font-weight: 600;
  }
}

.verify__product {
  display: flex;
  flex-direction: column;
  gap: 4px;

  small {
    color: var(--gray-500);
  }
}

.verify__status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-color);
  font-weight: 600;
  font-size: 12px;
}

.verify__actions {
  display: flex;
  gap: 12px;
}

.link {
  border: none;
  background: none;
  color: var(--primary-color);
  cursor: pointer;

  &--danger {
    color: #d14343;
  }
}

.verify__detail {
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
  }
}
</style>
